<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="../bootstrap/css/style.css">
    <link rel="stylesheet" href="../bootstrap/css/font-awesome(1).css">
    <link rel="stylesheet" href="../bootstrap/css/nprogress.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/program.css">

</head>


<body>
    <div class="wrapper">
        <jsp:include page="./leftSidebar.jsp"></jsp:include>
        <div class="aside">
            <div class="widgets">
                <h4>搜索</h4>
                <div class="body search">
                    <form action="search.jsp">
                        <input type="text" class="keys" id="keys" placeholder="输入关键字">
                        <input type="button" class="btn" id="SearchBtn" value="搜索">
                    </form>
                </div>
            </div>
            <div class="widgets">
                <h4>随机推荐</h4>
                <ul class="body random">
                    <li>
                        <a href="javascript:;">
                            <p class="title">TV动画《满溢的水果挞将于2020年10月播出。</p>
                            <p class="reading">阅读(819)</p>
                            <div class="pic">
                                <img src="../uploads/right1.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">TV动画《EX-ARM》于2021年1月10日播出</p>
                            <p class="reading">阅读(906)</p>
                            <div class="pic">
                                <img src="../uploads/right2.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">手游《Fate/Grand》配信5周年纪念动画PV公开</p>
                            <p class="reading">阅读(509)</p>
                            <div class="pic">
                                <img src="../uploads/right3.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">芳文社漫画改编动画《满溢的水果塔》追加声优</p>
                            <p class="reading">阅读(679)</p>
                            <div class="pic">
                                <img src="../uploads/right4.jpg" alt="">
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <p class="title">TV动画《天使与龙的轮舞》将推出蓝光BOX。</p>
                            <p class="reading">阅读(889)</p>
                            <div class="pic">
                                <img src="../uploads/right5.jpg" alt="">
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div class="swipe">
                <ul class="swipe-wrapper">
                    <li>
                        <a href="#">
                            <img src="../uploads/slide1.jpg">
                            <span>动漫主题演示</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../uploads/slide2.jpg">
                            <span>动漫主题演示</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../uploads/slide3.jpg">
                            <span>动漫主题演示</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../uploads/slide4.jpg">
                            <span>动漫主题演示</span>
                        </a>
                    </li>
                </ul>
                <p class="cursor"><span class="active"></span><span></span><span></span><span></span></p>
                <a href="javascript:;" class="arrow prev"><i class="fa fa-chevron-left"></i></a>
                <a href="javascript:;" class="arrow next"><i class="fa fa-chevron-right"></i></a>
            </div>
            <div class="panel hots">
                <h3>热门推荐</h3>
                <ul>
                    <li>
                        <a href="video.jsp">
                            <img src="../uploads/hots1.jpg" alt="">
                            <span>请问您今天要来点兔子吗？BLOOM</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../uploads/hots2.jpg" alt="">
                            <span>在魔王城说晚安</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../uploads/hots3.jpg" alt="">
                            <span>进击的巨人第四季</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="../uploads/hots4.jpg" alt="">
                            <span> one room第三季</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="panel new">
                <h3>最新发布</h3>
                <div class="entry">
                    <div class="head">
                        <span class="sort">会生活</span>
                        <a href="javascript:;">TV动画《碧蓝航线》新视觉绘公开</a>
                    </div>
                    <div class="main">
                        <p class="info">admin 发表于 2020-06-20</p>
                        <p class="brief">TV动画《碧蓝航线 微速前行》新视觉绘公开，2021年1月11日开播。 该作为游戏《碧蓝航线》的治愈系官方四格漫画。与以战斗为主的动画本篇不同，本作中将讲述在母港里生活的各位舰船的日常生活的故事，动画由Yostar Pictures负责制作。</p>
                        <p class="extra">
                            <span class="reading">阅读(3134)</span>
                            <span class="comment">评论(345)</span>
                            <a href="javascript:;" class="like">
                                <i class="fa fa-thumbs-up"></i>
                                <span>赞(237)</span>
                            </a>
                            <a href="javascript:;" class="tags">
                分类：<span>动漫资讯</span>
              </a>
                        </p>
                        <a href="javascript:;" class="thumb">
                            <img src="../uploads/left1.jpg" alt="">
                        </a>
                    </div>
                </div>
                <div class="entry">
                    <div class="head">
                        <span class="sort">会生活</span>
                        <a href="javascript:;">TV动画《光辉魔女》特别PV公开</a>
                    </div>
                    <div class="main">
                        <p class="info">admin 发表于 2020-06-20</p>
                        <p class="brief">强袭魔女新系列三部曲之一，TV动画《联盟空军航空魔法音乐队 光辉魔女》将于2021年播出，动画由david productio负责制作，近日官方公开了了一段特别PV</p>
                        <p class="extra">
                            <span class="reading">阅读(3406)</span>
                            <span class="comment">评论(234)</span>
                            <a href="javascript:;" class="like">
                                <i class="fa fa-thumbs-up"></i>
                                <span>赞(157)</span>
                            </a>
                            <a href="javascript:;" class="tags">
                分类：<span>动漫资讯</span>
              </a>
                        </p>
                        <a href="javascript:;" class="thumb">
                            <img src="../uploads/left2.jpg" alt="">
                        </a>
                    </div>
                </div>
                <div class="entry">
                    <div class="head">
                        <span class="sort">会生活</span>
                        <a href="javascript:;">TV动画《异世界魔王》第二季确定制作</a>
                    </div>
                    <div class="main">
                        <p class="info">admin 发表于 2020-06-20</p>
                        <p class="brief">改编自紫雪夜创作的同名轻小说的TV动画《异世界魔王与召唤少女的奴隶魔术》今天宣布了第二季动画制作确定的消息。动画第二季名为《异世界魔王与召唤少女的奴隶魔术Ω》，将于2021年播出，官方还公开了包含新角色的海报。
                            <p class="extra">
                                <span class="reading">阅读(3466)</span>
                                <span class="comment">评论(678)</span>
                                <a href="javascript:;" class="like">
                                    <i class="fa fa-thumbs-up"></i>
                                    <span>赞(677)</span>
                                </a>
                                <a href="javascript:;" class="tags">
                分类：<span>动漫资讯</span>
              </a>
                            </p>
                            <a href="javascript:;" class="thumb">
                                <img src="../uploads/left3.jpg" alt="">
                            </a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script src="../bootstrap/js/jquery/jquery.js"></script>
    <script src="../bootstrap/js/nprogress/nprogress.js"></script>
    <script src="../bootstrap/js/swipe/swipe.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#SearchBtn').click(function () {
                var keys = $('#keys').val().trim();
                location.href = './search.do?action=page&name=' + keys;
            })
        })
    </script>
    <script>
        //
        var swiper = Swipe(document.querySelector('.swipe'), {
            auto: 3000,
            transitionEnd: function(index) {
                // index++;

                $('.cursor span').eq(index).addClass('active').siblings('.active').removeClass('active');
            }
        });

        // 上/下一张
        $('.swipe .arrow').on('click', function() {
            var _this = $(this);

            if (_this.is('.prev')) {
                swiper.prev();
            } else if (_this.is('.next')) {
                swiper.next();
            }
        })
    </script>

</body>

</html>